import QtQuick 2.7
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.12

import "./widgets" as Widgets
import "../js/login.js" as JS_Login

Item {
    id: root
//    visible: true
//    width: 720
//    height: 1280
//    title: qsTr("LOGIN-HPY")

    signal loginSuccess(string user)

    function showErrorMessage(message, title) {
        if (!title) {
            title = ""
        }

        msgBox.show(title, message)
    }

    Component.onCompleted: {
        edtAccount.text = "POCTPYG0001"
        edtPassword.text = "123456"
    }

    /////////////////////////////////////////////////////////// UI ////

    Rectangle {
        id: bg
        anchors.fill: parent
        antialiasing: true
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#FF8686" }
            GradientStop { position: 1.0; color: Qt.lighter("#FF8686", 1.4) }
        }
    }

    Column {
        width: parent.width
        anchors.centerIn: parent
        spacing: 20

        Widgets.LogoLayout {
            width: parent.width
            height: root.height * 0.15
        }

        Label {
            width: parent.width
            height: root.height * 0.15
            horizontalAlignment: Label.AlignHCenter
            verticalAlignment: Label.AlignVCenter

            text: qsTr("速析能可攜式試紙檢測儀")
            font.pixelSize: height * 0.3
        }

        Widgets.TextFieldWithLabel {
            id: edtAccount
            width: parent.width * 0.92
            height: root.height * 0.05
            placeholderText: qsTr("賬    號")
            title: qsTr("賬    號")
        }

        Widgets.TextFieldWithLabel {
            id: edtPassword
            width: parent.width * 0.92
            height: root.height * 0.05
            showAsPassword: true
            placeholderText: qsTr("密    碼")
            title: qsTr("密    碼")
        }

        //-------------------
        Item {
            width: parent.width * 0.92
            height: root.height * 0.04
            CheckBox {
                height: parent.height
                anchors.right: parent.right
                anchors.verticalCenter: parent.verticalCenter
                text: qsTr("記住密碼")
                font.pixelSize: height * 0.55
            }
        }

        Item {
            width: parent.width
            height: root.height * 0.065
            Widgets.FlatButton {
                width: parent.width / 5
                height: parent.height
                anchors.centerIn: parent

                text: qsTr("登    入")
                onClicked: {
                    if (!JS_Login.login(edtAccount.text, edtPassword.text)) {
                        showErrorMessage(qsTr("您的賬號或密碼錯誤，請洽詢您的賬號管理員"),
                                         qsTr("資料錯誤"))
                    } else {
                        loginSuccess(edtAccount.text)
                    }
                }
            }
        }

        Label {
            width: parent.width
            horizontalAlignment: Label.AlignHCenter
            height: root.height * 0.06
            font.pixelSize: height * 0.35
            text: qsTr("若忘記密碼，請聯系您的賬號管理員")
        }
    }

    //--------------------- MSGBOX ----
    Widgets.SnackBar {
        id: snackBar
        width: parent.width
        height: parent.height * 0.06
        anchors.bottom: parent.bottom
    }

    Widgets.MsgBox {
        id: msgBox
        anchors.fill: parent
        visible: false
    }

}
